<template>
    <div class="main">
        <div  class="reg">
            <div class="logo"></div>
            <div class="input1">
                <van-icon name="phone" />
                <input v-model="phone" type="text" placeholder="请输入手机号">
            </div>
            <div class="input2">
                <van-icon name="friends" />
                <input v-model="username" type="text" placeholder="请输入用户名">
            </div>
            <van-button :loading="loading"  @click="regEvt" round type="info" color="linear-gradient(to right, #f4d1c7, #ebbfd3)">注册</van-button>
            <van-button @click="$router.push('/login')" round type="info" color="linear-gradient(to right, #f4d1c7, #ebbfd3)">去登陆</van-button>
        </div>
    </div>
</template>
<script>
import {registerUser} from '../../axios/loginApi'
export default {
    data() {
        return {
            loading :false,
            phone:'',
            username:''
        }
    },
    
    methods: {
        //注册事件
        async regEvt(){
            this.loading=true

            //验证手机号格式
            if(!/^1[3-9]{1}[0-9]{9}$/.test(this.phone)){
                this.$toast({
                    message: '请输入正确的手机号',
                    position: 'bottom',
                })
                this.loading=false
                return
            }

            //验证用户名输入是否为空
            if(this.username===''){
                this.$toast({
                    message: '请输入用户名',
                    position: 'bottom',
                })
                this.loading=false
                return
            }

            //发出注册请求
            let res= await registerUser(this.phone,this.username)
            //判断手机号是否被注册
            if(res.code===403&&res.message==='用户已存在'){
                this.$toast({
                    message: '用户已注册',
                    position: 'bottom',
                    })
                    this.loading=false
                    return
            }
            if(res.code===200){
                this.$toast({
                    message: '注册成功，请登录',
                    position: 'bottom',
                })
            }
            setTimeout(()=>{
                this.loading=false
            })
        }
    },
}
</script>
<style lang="less" scoped>
.main{
    display: block;
    .reg{
        height: 100%;
        width: 100%;
        background: #fce1da;
        padding-top: 50px;
        .logo{
            margin: 0px auto;
            width: 200px;
            height: 200px;
            background: url(../../images/logo.png)no-repeat center center/ 100% 100%;
        }
        .input1{
            width: 250px;
            margin: 80px auto 20px;
            display: block;
            position: relative;
            background: #fff;
            border: 1px solid #fff;
            border-radius: 20px;
            .van-icon{
                position: absolute;
                top: 9px;
                left: 9px;
                display: block;
                z-index: 90;
            }
            input{     
                border: 0;
                text-indent: 30px;
                height: 30px;
                line-height: 30px;
                border-radius: 20px;
                width: 150px;
                &::-webkit-input-placeholder{
                    font-size: 12px;
                }
            }
        }
        .input2{
            width: 250px;
            margin: 20px auto 30px;
            display: block;
            position: relative;
            background: #fff;
            border: 1px solid #fff;
            border-radius: 20px;
            margin-bottom: 106px;
            .van-icon{
                position: absolute;
                top: 9px;
                left: 9px;
                display: block;
                z-index: 90;
            }
            input{
                border: 0;
                text-indent: 30px;
                height: 30px;
                line-height: 30px;
                border-radius: 20px;
                width: 150px;
                &::-webkit-input-placeholder{
                    font-size: 12px;
                }
            }
            span{
                font-size: 10px;
            }
        }
        .van-button{
            display: block;
            width: 250px;
            margin:25px auto 10px;
        }
    }
}

</style>